<template>
    <div class="wrapper">
        <div class="goods" v-for="item in goodsList" :key="item.id">
            <div class="top">
                <p class="tit">{{item.name}}</p>
                <div>
                    <ul class="top_list">
                        <li v-for="itemx in item.children" :key="itemx.id">
                            <a href="#">{{itemx.name}}</a>
                        </li>
                    </ul>
                    <p class="all">查看全部 &gt;</p>
                </div>
            </div>
            <div class="content">
                <img :src="item.picture" @click = "tmwl(item)" class="bigImg" alt="">
                <ul class="good">
                    <li v-for="items in item.goods" :key="items.id" @click="toDetail(items.id)">
                        <img :src="items.picture" alt="">
                        <p class="name">{{items.name}}</p>
                        <p class="dic">{{items.desc}}</p>
                        <p class="price">￥{{items.price}}</p>
                        <div class="over">
                            <p>找相似</p>
                            <span>发现更多宝贝 &gt;</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"HomeGoods",
    data(){
        return {
            goodsList:[]
        }
    },
    async created(){
        const res=await this.$http.homeGoods();
        // console.log(res);
        this.goodsList=res.data.result;
    },
    methods:{
        tmwl(e) {
            this.$router.push({
                path:"/GeHr",
                query:{
                    list:e
                }
            })
        },
        toDetail(id){
            this.$router.push({
                path:"/details",
                query:{
                    id
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.wrapper{
    padding:0 250px;
    .goods{
        width:100%;
        .top{
            height:80px;
            line-height:40px;
            display:flex;
            justify-content: space-between;
            .tit{
                font-size:30px;
            }
            div{
                display:flex;
                margin-top:20px;
                .top_list{
                    list-style:none;
                    display:flex;
                    li{
                        a{
                            text-decoration: none;
                            color:#333;
                            padding:5px 10px;
                        }
                    }
                    li:hover a{
                        background:#27ba9b;
                        border-radius:8px;
                    }
                }
                .all{
                    margin-left:30px;
                    color:#666;
                }
            }
            
        }
        .content{
            display:flex;
            .bigImg{
                width:240px;
                height:590px;
                margin-top:15px;
            }
            .good{
                list-style:none;
                display:flex;
                justify-content: space-between;
                flex-wrap:wrap;
                li{
                    width:22%;
                    height:280px;
                    margin-bottom:20px;
                    text-align:center;
                    
                    position:relative;
                    overflow:hidden;
                    img{
                        width:160px;
                        height:160px;
                    }
                    .name{
                        width:170px;
                        height:40px;
                        overflow:hidden;
                        margin:0 auto;
                        text-align:left;
                        margin-top:2px;
                    }
                    .dic{
                        width:170px;
                        font-size:15px;
                        color:#666;
                        height:20px;
                        margin-top:15px;
                        overflow:hidden;
                        margin:0 auto;
                        text-align:left;
                        margin-top:5px;
                    }
                    .price{
                        width:170px;
                        color:#e26237;
                        font-size:20px;
                        margin:0 auto;
                        text-align:left;
                        margin-top:10px;
                    }
                    .over{
                        width:100%;
                        height:80px;
                        background:#27ba9b;
                        position:absolute;
                        bottom:-80px;
                        left:0;
                        transition:1s;
                        p{
                            font-size:18px;
                            color:#fff;
                            width:140px;
                            margin:10px auto;
                            padding-bottom:10px;
                            border-bottom:1px solid #fff;
                        }
                        span{
                            color:#fff;
                            font-size:14px;
                            display:block;
                            margin-top:-5px;
                        }
                    }
                }
                li:hover{
                    outline:1px solid #27ba9b;
                }
                li:hover .over{
                    bottom:0;
                }
            }
        }
    }
}
</style>